import React,{Component} from 'react';
import { Card,Button,Table,message,Form,Modal,Image} from 'antd';
import dayjs from 'dayjs';
import {reqAllNoticeList} from '../../api';
import {PAGE_SIZE,IMAGE_URL} from '../../config';

const {Item} =Form;

 class Notice extends Component {
    state={
        noticeList:[],//用户列表
        isLoading:true, //table是否显示加载动画
        useStatus:1,
        id:'',
        isVisible:false,
        img:'-1',
        title:'',
        detail:'',
        createTime:''
    }
    componentDidMount(){
            this.getNoticeList()
    }
    // 获取用户列表
    getNoticeList = async () => {
        let result = await reqAllNoticeList()
        const { code,data,msg} = result
       if(code === 200){
           if(data.length===0)  message.success(msg,1)
           this.setState({
            noticeList:data,
            isLoading:false,
        })
        }else{
            message.error(msg,1)      
        } 
    }

    // 展示弹窗
    showModel=(item)=>{
        let { img,title,detail,createTime,useStatus}={...item}
        if(img===undefined) img='-1' 
        this.setState({isVisible:true,img,title,detail,createTime,useStatus})
    }
    render(){
        const { noticeList,isVisible, img,title,detail,createTime } = this.state
          const columns = [
            { title: '标题',
            width:'50%',
              dataIndex: 'title',
              key: 'id',
            },
            { title: '发布时间',
                dataIndex: 'createTime',
                key: 'id',
                render:time=>dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            },
            { title: '操作',
                key: 'id',
                align:'center',
                render:(item)=>{
                    return(
                        <div>
                            <Button type="link" onClick={()=>{this.showModel(item)}}>详情</Button>
                        </div>
                    )
                }
            },
          ];
      
        return (
            <div>
                <Card>
                    <Table 
                        dataSource={noticeList} 
                        columns={columns}
                        bordered
                        rowKey='id'
                        pagination={{
                            pageSize:PAGE_SIZE,
                        }}
                        loading={this.state.isLoading} 
                    />
                </Card>
                <Modal
                    title="公告详情"
                    visible={isVisible}
                    onOk={()=>this.setState({isVisible:false})}
                    onCancel={()=>this.setState({isVisible:false})}
                    footer={null}
                    maskClosable={false}
                    width={700}
                    >
                        <Item>
                            <div><span className="notice-name">标题：</span><span style={{fontWeight:'bolder ',fontSize:'20px'}}>{title}</span></div>
                        </Item>
                        <Item>
                            <div><span className="notice-name">封面：</span><span>{img==='-1'||img===null?'':<Image  width={200} src={IMAGE_URL+img} alt="封面图片"/> }</span></div>
                        </Item>
                        <Item>
                            <div><span className="notice-name">内容：</span><span dangerouslySetInnerHTML={{__html:detail}}></span></div>
                        </Item>
                        <Item>
                            <div><span className="notice-name">更新时间：</span><span>{dayjs(createTime).format('YYYY年MM月DD日 HH:mm:ss')}</span></div>
                        </Item>
                    </Modal>
            </div>
        );
    }
}
export default Notice;